<template>
  <div>
    <el-row>
      <el-col :span="24">
        <div class="tob-bar">
          <el-breadcrumb separator=">">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>社保申报</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </el-col>
    </el-row>
     <el-row>
     <div style="height:50px;width:100%"></div>
       <div class="mainContainer addCompanyPage">
       <el-row :gutter="20">
         <el-col :span="24" :offset="0">
             <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
              <el-tab-pane label="增员" name="first">
                <div class="mainContainer caseListPage">
                  <div class="table-serch-bar">
                    <el-form ref="form" :inline="true" size="medium" label-width="70px">
                      <el-form-item label="用户名称">
                        <el-input v-model="form.name"></el-input>
                      </el-form-item>
                      <el-form-item label="参保地">
                        <el-input v-model="form.s_region"></el-input>
                      </el-form-item>
                      <el-form-item label="创建时间">
                        <el-col :span="10">
                          <el-date-picker type="date" placeholder="选择日期" v-model="form.Stime" style="width: 100%;" format="yyyy 年 MM 月 dd 日"  value-format="yyyy-MM-dd"></el-date-picker>
                        </el-col>
                        <el-col class="line" :span="1">-</el-col>
                        <el-col :span="10">
                          <el-date-picker type="date" placeholder="选择日期" v-model="form.Etime" style="width: 100%;" format="yyyy 年 MM 月 dd 日"  value-format="yyyy-MM-dd"></el-date-picker>
                        </el-col>
                      </el-form-item>
                      <el-form-item label="状态">
                        <el-select v-model="form.status" placeholder="请选择">
                          <el-option label="申报中" value="1"></el-option>
                          <el-option label="已撤回" value="2"></el-option>
                          <el-option label="申报成功" value="3"></el-option>
                          <el-option label="申报失败" value="4"></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item>
                        <el-button type="success" @click="onSubmit">查询</el-button>
                      </el-form-item>
                    </el-form>
                  </div>
                  <el-table
                    @selection-change="handleSelectionChange"
                    class="my-table"
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    :default-sort="{prop: 'date', order: 'descending'}"
                  >
                    <el-table-column width="55" align="center" type="selection"></el-table-column>
                    <el-table-column min-width="90" align="center" type="index" label="序号"></el-table-column>
                    <el-table-column min-width="140" align="center" prop="companyName" label="客户名称"></el-table-column>
                    <el-table-column min-width="140" align="center" prop="name" label="姓名"></el-table-column>
                    <el-table-column min-width="200" align="center" prop="id_card" label="证件号"></el-table-column>
                    <el-table-column min-width="200" align="center" prop="s_region" label="参保地"></el-table-column>
                    <el-table-column min-width="120" align="center" prop="s_jointime" label="参保时间"></el-table-column>
                    <el-table-column min-width="120" align="center" prop="plan" label="方案"></el-table-column>
                    <el-table-column min-width="120" align="center" prop="status" label="状态"></el-table-column>
                    <el-table-column min-width="90" align="center" prop="s_cbase" label="基数"></el-table-column>
                    <el-table-column min-width="140" align="center" prop="create_time" label="创建时间"></el-table-column>

                  </el-table>
                  <div class="table-tools clearfix">
                    <div class="fl">
                      <el-button type="default" icon="iconfont iconchange" size="medium" @click="changeCase">申报成功</el-button>
                      <el-button type="default" icon="iconfont iconchange" size="medium" @click="changeCase1">申报失败</el-button>
                      <el-button type="default" icon="iconfont icondelet1" size="medium" @click="handleTest1">数据下载</el-button>
                    </div>
                    <div class="pagination fr">
                      <div class="block">
                        <el-pagination
                          @current-change="handleCurrentChange"
                          :current-page.sync="pageInfo.page"
                          :page-size="10"
                          layout="prev, pager, next, jumper"
                          :total="pageInfo.total"
                        ></el-pagination>
                      </div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="减员" name="second">
                <div class="mainContainer caseListPage">
                  <div class="table-serch-bar">
                    <el-form ref="form" :inline="true" size="medium" label-width="70px">
                      <el-form-item label="用户名称">
                        <el-input v-model="form.name"></el-input>
                      </el-form-item>
                      <el-form-item label="参保地">
                        <el-input v-model="form.s_region"></el-input>
                      </el-form-item>
                      <el-form-item label="创建时间">
                        <el-col :span="10">
                          <el-date-picker type="date" placeholder="选择日期" v-model="form.Stime" style="width: 100%;" format="yyyy 年 MM 月 dd 日"  value-format="yyyy-MM-dd"></el-date-picker>
                        </el-col>
                        <el-col class="line" :span="1">-</el-col>
                        <el-col :span="10">
                          <el-date-picker type="date" placeholder="选择日期" v-model="form.Etime" style="width: 100%;" format="yyyy 年 MM 月 dd 日"  value-format="yyyy-MM-dd"></el-date-picker>
                        </el-col>
                      </el-form-item>
                      <el-form-item label="状态">
                        <el-select v-model="form.status" placeholder="请选择">
                          <el-option label="申报中" value="1"></el-option>
                          <el-option label="已撤回" value="2"></el-option>
                          <el-option label="申报成功" value="3"></el-option>
                          <el-option label="申报失败" value="4"></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item>
                        <el-button type="success" @click="onSubmit">查询</el-button>
                      </el-form-item>
                    </el-form>
                  </div>
                  <el-table
                    @selection-change="handleSelectionChange"
                    class="my-table"
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    :default-sort="{prop: 'date', order: 'descending'}"
                  >
                    <el-table-column width="55" align="center" type="selection"></el-table-column>
                    <el-table-column min-width="90" align="center" type="index" label="序号"></el-table-column>
                    <el-table-column min-width="140" align="center" prop="companyName" label="客户名称"></el-table-column>
                    <el-table-column min-width="140" align="center" prop="name" label="姓名"></el-table-column>
                    <el-table-column min-width="200" align="center" prop="id_card" label="证件号"></el-table-column>
                    <el-table-column min-width="200" align="center" prop="s_region" label="参保地"></el-table-column>
                    <el-table-column min-width="120" align="center" prop="s_jointime" label="参保时间"></el-table-column>
                    <el-table-column min-width="120" align="center" prop="s_reason" label="减员原因"></el-table-column>
                    <el-table-column min-width="120" align="center" prop="s_downtime" label="减员生效时间"></el-table-column>
                    <el-table-column min-width="90" align="center" prop="s_cbase" label="基数"></el-table-column>
                    <el-table-column min-width="120" align="center" prop="status" label="状态"></el-table-column>
                    <el-table-column min-width="140" align="center" prop="create_time" label="创建时间"></el-table-column>

                  </el-table>
                  <div class="table-tools clearfix">
                    <div class="fl">
                      <el-button type="default" icon="iconfont iconchange" size="medium" @click="changeCase">申报成功</el-button>
                      <el-button type="default" icon="iconfont iconchange" size="medium" @click="changeCase1">申报失败</el-button>
                      <el-button type="default" icon="iconfont icondelet1" size="medium" @click="handleTest2">数据下载</el-button>
                    </div>
                    <div class="pagination fr">
                      <div class="block">
                        <el-pagination
                          @current-change="handleCurrentChange"
                          :current-page.sync="pageInfo.page"
                          :page-size="10"
                          layout="prev, pager, next, jumper"
                          :total="pageInfo.total"
                        ></el-pagination>
                      </div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="调基" name="third"><div class="mainContainer caseListPage">
                <div class="table-serch-bar">
                  <el-form ref="form" :inline="true" size="medium" label-width="70px">
                    <el-form-item label="用户名称">
                      <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="参保地">
                      <el-input v-model="form.s_region"></el-input>
                    </el-form-item>
                    <el-form-item label="创建时间">
                      <el-col :span="10">
                        <el-date-picker type="date" placeholder="选择日期" v-model="form.Stime" style="width: 100%;" format="yyyy 年 MM 月 dd 日"  value-format="yyyy-MM-dd"></el-date-picker>
                      </el-col>
                      <el-col class="line" :span="1">-</el-col>
                      <el-col :span="10">
                        <el-date-picker type="date" placeholder="选择日期" v-model="form.Etime" style="width: 100%;" format="yyyy 年 MM 月 dd 日"  value-format="yyyy-MM-dd"></el-date-picker>
                      </el-col>
                    </el-form-item>
                    <el-form-item label="状态">
                      <el-select v-model="form.status" placeholder="请选择">
                        <el-option label="申报中" value="1"></el-option>
                        <el-option label="已撤回" value="2"></el-option>
                        <el-option label="申报成功" value="3"></el-option>
                        <el-option label="申报失败" value="4"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="success" @click="onSubmit">查询</el-button>
                    </el-form-item>
                  </el-form>
                </div>
                <el-table
                  @selection-change="handleSelectionChange"
                  class="my-table"
                  ref="multipleTable"
                  :data="tableData"
                  tooltip-effect="dark"
                  style="width: 100%"
                  :default-sort="{prop: 'date', order: 'descending'}"
                >
                  <el-table-column width="55" align="center" type="selection"></el-table-column>
                  <el-table-column min-width="90" align="center" type="index" label="序号"></el-table-column>
                  <el-table-column min-width="140" align="center" prop="companyName" label="客户名称"></el-table-column>
                  <el-table-column min-width="140" align="center" prop="name" label="姓名"></el-table-column>
                  <el-table-column min-width="200" align="center" prop="id_card" label="证件号"></el-table-column>
                  <el-table-column min-width="200" align="center" prop="s_region" label="参保地"></el-table-column>
                  <el-table-column min-width="120" align="center" prop="s_jointime" label="参保时间"></el-table-column>
                  <el-table-column min-width="120" align="center" prop="s_s_cbase" label="原基数"></el-table-column>
                  <el-table-column min-width="90" align="center" prop="s_e_cbase" label="现基数"></el-table-column>
                  <el-table-column min-width="120" align="center" prop="status" label="状态"></el-table-column>
                  <el-table-column min-width="140" align="center" prop="create_time" label="创建时间"></el-table-column>

                </el-table>
                <div class="table-tools clearfix">
                  <div class="fl">
                    <el-button type="default" icon="iconfont iconchange" size="medium" @click="changeCase">申报成功</el-button>
                    <el-button type="default" icon="iconfont iconchange" size="medium" @click="changeCase1">申报失败</el-button>
                    <el-button type="default" icon="iconfont icondelet1" size="medium" @click="handleTest3">数据下载</el-button>
                  </div>
                  <div class="pagination fr">
                    <div class="block">
                      <el-pagination
                        @current-change="handleCurrentChange"
                        :current-page.sync="pageInfo.page"
                        :page-size="10"
                        layout="prev, pager, next, jumper"
                        :total="pageInfo.total"
                      ></el-pagination>
                    </div>
                  </div>
                </div>
              </div>
              </el-tab-pane>
            </el-tabs>
         </el-col>
      </el-row>
       </div>
    </el-row>
  </div>
</template>

<script>
import Http from "../../libs/http.js";
import XLSX from "xlsx";

export default {
  inject:['reload'],
  name: "reportso",
   data() {
      return {
        activeName: 'first',
        checked: true,
        selected: [],
        tableData: [],
        form: {
          s_region: "",
          name: "",
          status: "",
          Etime: null,
          Stime: null
        },
        currentPage3: 1,
        discount: true,
        discount2: true,
        value: "",
        value2: "",
        addrs: [],
        pageInfo: {
          total: 0,
          pageSize: 10,
          page: 1
        }
      };
    },
  created() {
    this.getlist();
    this.getAllAddrs();
  },
    methods: {
      handleClick(tab, event) {
        this.pageInfo.page = 1;
        this.getlist();
      },
      getlist: function() {
        let param = this.initGetListParam();
        Http.api
          .post(
            "/test/v7",
            param
          )
          .then(res => {
            this.tableData = res.data.data;
            this.pageInfo.total = res.data.pageList.total;
          });
      },
      initGetListParam: function() {
        let param = new Object();
        param.page = this.pageInfo.page;
        param.pageSize = this.pageInfo.pageSize;
        param.actionName=this.activeName;
        param.name = this.form.name;
        param.s_region = this.form.s_region;
        param.status = this.form.status;
        param.Stime = this.form.Stime;
        param.Etime = this.form.Etime;
        param.service_type = 1;
        return param;
      },
      getAllAddrs() {
        Http.api.get("/addr/allPermission",{params:{permissionType:0}}).then(res => {
          this.addrs = res.data;
        });
      },
      handleCurrentChange(val) {
        this.getlist();
      },
      onSubmit() {
        this.pageInfo.page = 1;
        this.getlist();
      },
      //到账时间
      changeCase() {
        if (this.selected.length != 1) {
          this.$message.error("请选择一条数据");
          return;
        } else {
          let ids = new Array();
          this.selected.forEach(e => {
            ids.push(e.id);
          });
          Http.api.post("/test/v8", { ids: ids }).then(res=>{
            this.reload();
          })
        }
      },
      changeCase1() {
        if (this.selected.length != 1) {
          this.$message.error("请选择一条数据");
          return;
        } else {
          let ids = new Array();
          this.selected.forEach(e => {
            ids.push(e.id);
          });
          Http.api.post("/test/v9", { ids: ids }).then(res=>{
            this.reload();
          })
        }
      },
      handleSelectionChange: function(val) {
        this.selected = val;
      },
      handleTest1(){
        //拿数据
        let param = this.initGetListParam();
        Http.api
          .post(
            "/test/v11",
            param
          )
          .then(res => {
            const data = [];// 表格数据定义
            // 表头
            const tableHeaderList = [
              ["姓名", "证件号","参保地","参保时间", "方案","基数","创建时间"]
            ];
            tableHeaderList.map((tableHeaderItem) => {
              data.push(tableHeaderItem);
            });
            // 表格数据
            const tableDataList = res.data;
            tableDataList.map((tableDataItem) => {
              data.push(tableDataItem);
            });
            // 将数据转成XLSX需要的格式
            const ws = XLSX.utils.aoa_to_sheet(data);
            // 合并单元格
            // merges合并单元格: s开始，e结束, c是列,r是行[A1相当于0列]
            // cols列宽度
            const  cols = [
              {wch: 20}, //第一列
              {wch: 8} //第一列
            ];
            ws["!cols"] = cols;
            // 设置样式(暂时无效)
            var styleBase = {
              font: {
                name: '宋体',
                sz: 10,
                color: {
                  rgb: '00104E8B'
                }
              },
              border: { // 设置边框
                top: { style: 'thin' },
                bottom: { style: 'thin' },
                left: { style: 'thin' },
                right: { style: 'thin' }
              },
              alignment: { horizontal: "center", vertical: "center", wrap_text: true },
              fill: { bgcolor: { rgb: 'ffff00' } }
            };
            Object.keys(ws).map((wsItem) => {
              if(["!ref", "!cols"].includes(wsItem)) {
                return true;
              }
              ws[wsItem].s = styleBase;
            });
            const wb = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(wb, ws, "SheetJS");
            function s2ab(s) {
              if (typeof ArrayBuffer !== 'undefined') {
                var buf = new ArrayBuffer(s.length);
                var view = new Uint8Array(buf);
                for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
                return buf;
              } else {
                var buf = new Array(s.length);
                for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
                return buf;
              }
            };
            saveAs(new Blob([
                s2ab(
                  // 这里的数据是用来定义导出的格式类型
                  XLSX.write(wb, {
                    bookType: 'xlsx',
                    bookSST: false,
                    type: 'binary'
                  })
                )
              ], {
                type: ""
              }),
              "社保增员.xlsx");
          });
      },
      handleTest2(){
        //拿数据
        let param = this.initGetListParam();
        Http.api
          .post(
            "/test/v12",
            param
          )
          .then(res => {
            const data = [];// 表格数据定义
            // 表头
            const tableHeaderList = [
              ["姓名", "证件号","参保地","参保时间", "减员原因","减员生效时间","基数","创建时间"]
            ];
            tableHeaderList.map((tableHeaderItem) => {
              data.push(tableHeaderItem);
            });
            // 表格数据
            const tableDataList = res.data;
            tableDataList.map((tableDataItem) => {
              data.push(tableDataItem);
            });
            // 将数据转成XLSX需要的格式
            const ws = XLSX.utils.aoa_to_sheet(data);
            // 合并单元格
            // merges合并单元格: s开始，e结束, c是列,r是行[A1相当于0列]
            // cols列宽度
            const  cols = [
              {wch: 20}, //第一列
              {wch: 8} //第一列
            ];
            ws["!cols"] = cols;
            // 设置样式(暂时无效)
            var styleBase = {
              font: {
                name: '宋体',
                sz: 10,
                color: {
                  rgb: '00104E8B'
                }
              },
              border: { // 设置边框
                top: { style: 'thin' },
                bottom: { style: 'thin' },
                left: { style: 'thin' },
                right: { style: 'thin' }
              },
              alignment: { horizontal: "center", vertical: "center", wrap_text: true },
              fill: { bgcolor: { rgb: 'ffff00' } }
            };
            Object.keys(ws).map((wsItem) => {
              if(["!ref", "!cols"].includes(wsItem)) {
                return true;
              }
              ws[wsItem].s = styleBase;
            });
            const wb = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(wb, ws, "SheetJS");
            function s2ab(s) {
              if (typeof ArrayBuffer !== 'undefined') {
                var buf = new ArrayBuffer(s.length);
                var view = new Uint8Array(buf);
                for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
                return buf;
              } else {
                var buf = new Array(s.length);
                for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
                return buf;
              }
            };
            saveAs(new Blob([
                s2ab(
                  // 这里的数据是用来定义导出的格式类型
                  XLSX.write(wb, {
                    bookType: 'xlsx',
                    bookSST: false,
                    type: 'binary'
                  })
                )
              ], {
                type: ""
              }),
              "社保减员.xlsx");
          });
      },
      handleTest3(){
        //拿数据
        let param = this.initGetListParam();
        Http.api
          .post(
            "/test/v13",
            param
          )
          .then(res => {
            const data = [];// 表格数据定义
            // 表头
            const tableHeaderList = [
              ["姓名", "证件号","参保地","参保时间", "原基数","现基数","创建时间"]
            ];
            tableHeaderList.map((tableHeaderItem) => {
              data.push(tableHeaderItem);
            });
            // 表格数据
            const tableDataList = res.data;
            tableDataList.map((tableDataItem) => {
              data.push(tableDataItem);
            });
            // 将数据转成XLSX需要的格式
            const ws = XLSX.utils.aoa_to_sheet(data);
            // 合并单元格
            // merges合并单元格: s开始，e结束, c是列,r是行[A1相当于0列]
            // cols列宽度
            const  cols = [
              {wch: 20}, //第一列
              {wch: 8} //第一列
            ];
            ws["!cols"] = cols;
            // 设置样式(暂时无效)
            var styleBase = {
              font: {
                name: '宋体',
                sz: 10,
                color: {
                  rgb: '00104E8B'
                }
              },
              border: { // 设置边框
                top: { style: 'thin' },
                bottom: { style: 'thin' },
                left: { style: 'thin' },
                right: { style: 'thin' }
              },
              alignment: { horizontal: "center", vertical: "center", wrap_text: true },
              fill: { bgcolor: { rgb: 'ffff00' } }
            };
            Object.keys(ws).map((wsItem) => {
              if(["!ref", "!cols"].includes(wsItem)) {
                return true;
              }
              ws[wsItem].s = styleBase;
            });
            const wb = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(wb, ws, "SheetJS");
            function s2ab(s) {
              if (typeof ArrayBuffer !== 'undefined') {
                var buf = new ArrayBuffer(s.length);
                var view = new Uint8Array(buf);
                for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
                return buf;
              } else {
                var buf = new Array(s.length);
                for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
                return buf;
              }
            };
            saveAs(new Blob([
                s2ab(
                  // 这里的数据是用来定义导出的格式类型
                  XLSX.write(wb, {
                    bookType: 'xlsx',
                    bookSST: false,
                    type: 'binary'
                  })
                )
              ], {
                type: ""
              }),
              "社保调基.xlsx");
          });
      },
    }
};
</script>

